<template>
  <ul class="article_ul" v-if="showList">
    <li class="article_li" v-for=" (v,index) in articleList" :key="index" @click="selectArticle(v.id)">
      <div class="img_grp">
        <img v-lazy="v.url" alt="">
      </div>
      <div class="content_grp">
        <div class="article_title">
          {{v.post_title}}
        </div>
        <div class="other_grp">
          <span>{{v.author}}</span>
          <span class="iconfont icon-chakan"> {{v.post_hits}}</span>
          <span class="iconfont icon-zan2-icon"> {{v.post_like}}</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
  export default {
    name:'ArticleList',
    props:{
      articleList: Array,

    },
    computed: {
      showList() {
        return this.articleList.length
      }
    },
    methods:{
      selectArticle(id){
        // this.$store.dispatch('loadArticle',id);
        this.$router.push({path:'/article/' + id + ''})
      },
    }

  }
</script>

<style scoped>
  .article_ul {
    width: 100%;
  }

  li {
    width: 100%;
    padding: 32px 20px;
    border-bottom: solid 1px #ededef;
    background-color: white;

  }

  .article_li {
    height: 215px;
    margin-bottom: 20px;
  }
  .article_li .img_grp {
    width: 240px;
    height: 150px;
    float: left;
    border: solid 1px #ededef;
    margin-right: 38px;
    border-radius: 10px;
    overflow: hidden;
  }

  .content_grp {
    width: auto;
    position: relative;
  }

  .article_title {
    font-size: 28px;
    height: 80px;
    color: #333333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .other_grp {
    font-size: 24px;
    color: #c5c5c7;
    margin-top: 30px;
  }

  .other_grp span {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
  .icon-chakan{
    font-size: 24px;
  }
  .icon-zan2-icon{
    font-size: 24px;
  }


</style>
